<!--关联活动——下拉表格弹窗-->
<template>
  <div>
    <!-- <div>form.videoMaterialId=={{form.videoMaterialId}}
       dataInfo==={{dataInfo.videoMaterialId}}
     </div>-->
    <!--    <div>hint===={{hint}}</div>-->

    <!--    select-cl 为input的校检红框 -->

    <ele-table-select :class="!form.videoMaterialId && hint.length>0 ?'select-cls':''"
                      @select="selectVideo"
                      @clear="selectVideo"
                      ref="select"
                      v-model="form.videoMaterialId"
                      :clearable="true"
                      placeholder="请选择文件夹"
                      value-key="id"
                      label-key="name"
                      :table-config="tableConfig"
                      :popper-width="450">
      <!-- 角色列 -->
      <template v-slot:roles="{ row }">
        <el-tag v-for="item in row.roles"
                :key="item.roleId"
                size="mini"
                type="primary"
                :disable-transitions="true">
          {{ item.roleName }}
        </el-tag>
      </template>
    </ele-table-select>
  </div>
</template>

<script>
import { projectPage, haveProjectPage } from "@/api/creatCenter/authoringClips";
import { querySelectPages } from "@/api/creatCenter/piecemealManagement";
export default {
  name: "connected-activities",
  props: {
    //  type  1:projectName
    dataInfo: Object,
    hint: String,
    videoMaterialId: Number
  },
  data () {
    return {
      form: {
        videoMaterialId: ''
      },
      // 回显值
      initValue: undefined,
      // 表格配置
      tableConfig: {
        // datasource: [],
        datasource: ({ page, limit, where, order }) => {
          console.log("进入调用接口=========")
          // projectPage修改为selectPage,查询未剪辑数量大于0的数据
          return querySelectPages({
            ...where, ...order, page, limit, username: this.$store.state.user.info.username,
          });
        },
        columns: [
          // sortable: 'custom', 是否有升/降序
          {
            columnKey: 'index',
            type: 'index',
            width: 45,
            align: 'center',
            showOverflowTooltip: true,
            fixed: 'left'
          },
          {
            prop: 'name',
            label: '剪辑名称',
            showOverflowTooltip: true,
            minWidth: 110
          },
          {
            prop: 'countNumber',
            label: '视频数量',
            showOverflowTooltip: true,
            minWidth: 80
          }
        ],
        toolbar: false,
        pageSize: 5,
        pageSizes: [5, 10, 15, 20],
        size: 'small'
      },
    }
  },
  methods: {
    // 选择 视频素材
    selectVideo (e) {
      console.log('选择 视频素材', e)
      if (e) {
        this.form.idVideo = e.id //剪辑工程ID
        this.form.videoMaterialId = e.id //剪辑工程ID
        this.form.videoMaterial = e.name //剪辑工程名
      }
      // clear事件进入
      else {
        this.form.idVideo = '' //剪辑工程ID
        this.form.videoMaterialId = ''  //剪辑工程ID
        this.form.videoMaterial = ''  //剪辑工程名
        // this.hint=''
      }
      this.$emit('getData', e) // 修改
    },
    // 选择类型后，重新加载数据
    init (clipType) {
      //打印的是对象
      console.log("this.form====================.", this.form, 'this.dataInfo', this.dataInfo)
      // id 存在代表是修改
      if (this.dataInfo.id) {
        this.form.videoMaterialId = this.dataInfo.videoMaterial //剪辑工程ID  修改
        // this.form.videoMaterialId=this.dataInfo.videoMaterialId //剪辑工程ID
      }
      else {
        console.log("进入删除==========")
        this.form.videoMaterialId = null
        delete this.form.idVideo //剪辑工程ID
        delete this.form.videoMaterial //剪辑工程名
      }
      console.log("进入调用剪辑分类接口clipType=====", clipType)
      this.reload()
    },
    // 刷新下拉表格
    reload (where) {
      this.$refs.select.reload({
        where: where,
        page: 1
      });
    },
    clear () {
      // 清空数据并‘刷新列表’
      // this.reload()
      this.form.videoMaterialId = null
      delete this.form.idVideo //剪辑工程ID
      delete this.form.videoMaterial //剪辑工程名
    }
  },
  watch: {
    videoMaterialId (value) {
      console.log(value + '=================')
      this.$nextTick(() => {
        this.form.videoMaterialId = value
        console.log(this.form)
      })

    }
  }
}
</script>

<style scoped lang="less">
</style>
